<template>
  <div>
    <el-row style="margin-top: 20px">
      <el-col :span="20" :offset="2">
        <el-row>
          <div v-for="(item,index) in courseList" :key="index">
            <el-col :span="4"  style="margin-top: 25px;margin-left: 40px">
              <el-card class="box-card" shadow="hover" :body-style="{textAlign:'left'}"
                       @click.native="toStudentDetails(item.courseId)">
                <div slot="header">
                  <span style="font-weight: bolder">{{ item.courseName }}</span>
                </div>
                <div>
                  <el-image :src="src">
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </div>
                <div style="margin-top: 10px;font-weight: bolder">学时: <span style="color: #888">{{
                    item.coursePeriod
                  }}</span></div>
                <div style="margin-top: 10px;font-weight: bolder">学分: <span style="color: #888">{{
                    item.coursePoint
                  }}</span></div>
                <div style="margin-top: 10px;font-weight: bolder">课程状态: <span
                  style="color: #888">{{ item.courseStatus == 1 ? '上课中' : '已结束' }}</span></div>
                <div style="margin-top: 10px;font-weight: bolder">结束时间: <span style="color: #888">{{
                    item.courseEndTime
                  }}</span></div>
                <div
                  style="margin-top: 10px;font-weight: bolder;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                  课程简介:<span style="color: #888"> {{ item.courseContent }}</span></div>
              </el-card>
            </el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'studentIndex',
  data () {
    return {
      src: require('../../assets/fengmian.jpg'),
      courseList: {},
    }
  },
  methods: {
    init () {
      this.$http.get('/api/course/listForStudent/' + this.$store.state.user.id).then((res) => {
        if (res.data.code === 4040) {
          this.courseList = res.data.result
        } else {
          this.$confirm('初始化失败')
        }
      })
    },
    toStudentDetails (courseId) {
      this.$router.push({
        path: '/student/course',
        query: {
          courseId: courseId,
        }
      })
    },
  },
  mounted () {

  },
  created () {
    this.init()
  },
}
</script>

<style scoped>

</style>
